<template>
  <div class="container">
    <div class="color-picker">
      <n-text type="info">颜色选择器：</n-text>
      <n-color-picker v-model:value="color" :modes="['hex']" :actions="['clear']" />
    </div>
    <div class="color-name">
      <n-text type="info">颜色名称转化：</n-text>
      <n-select v-model:value="colorName" :options="colorOptions" filterable @update:value="handleColorNameUpdate" />
    </div>
    <div class="color-convert" :class="colorConvertThemeName">
      <n-text :class="colorConvertTextThemeName">HEX：{{ color }} <n-button ghost @click="copyColor('HEX')">复制</n-button></n-text>
      <n-text :class="colorConvertTextThemeName"> RGB：{{ RGB }} <n-button ghost @click="copyColor('RGB')">复制</n-button></n-text>
      <n-text :class="colorConvertTextThemeName"> HSL：{{ HSL }} <n-button ghost @click="copyColor('HSL')">复制</n-button></n-text>
      <n-text :class="colorConvertTextThemeName"> HSV：{{ HSV }} <n-button ghost @click="copyColor('HSV')">复制</n-button></n-text>
      <n-text :class="colorConvertTextThemeName"> HWB：{{ HWB }} <n-button ghost @click="copyColor('HWB')">复制</n-button></n-text>
      <n-text :class="colorConvertTextThemeName"> XYZ：{{ XYZ }} <n-button ghost @click="copyColor('XYZ')">复制</n-button></n-text>
      <n-text :class="colorConvertTextThemeName"> LAB：{{ LAB }} <n-button ghost @click="copyColor('LAB')">复制</n-button></n-text>
      <n-text :class="colorConvertTextThemeName"> LCH：{{ LCH }} <n-button ghost @click="copyColor('LCH')">复制</n-button></n-text>
      <n-text :class="colorConvertTextThemeName"> CMYK：{{ CMYK }} <n-button ghost @click="copyColor('CMYK')">复制</n-button></n-text>
      <n-text :class="colorConvertTextThemeName"> APPLE：{{ APPLE }} <n-button ghost @click="copyColor('APPLE')">复制</n-button></n-text>
      <n-text :class="colorConvertTextThemeName"> GRAY：{{ GRAY }} <n-button ghost @click="copyColor('GRAY')">复制</n-button></n-text>
      <n-text :class="colorConvertTextThemeName"> KEYWORD：{{ KEYWORD }} <n-button ghost @click="copyColor('KEYWORD')">复制</n-button></n-text>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useConfigStore } from "@renderer/store/config";
import convert from "color-convert";

const useConfig = useConfigStore();
const message = useMessage();

// 颜色选择器
const color = ref("#000");
watch(color, (newColor) => {
  RGB.value = convert.hex.rgb(newColor);
  HSL.value = convert.hex.hsl(newColor);
  HSV.value = convert.hex.hsv(newColor);
  HWB.value = convert.hex.hwb(newColor);
  XYZ.value = convert.hex.xyz(newColor);
  LAB.value = convert.hex.lab(newColor);
  LCH.value = convert.hex.lch(newColor);
  CMYK.value = convert.hex.cmyk(newColor);
  APPLE.value = convert.hex.apple(newColor);
  GRAY.value = convert.hex.gray(newColor);
  KEYWORD.value = convert.hex.keyword(newColor);
});

// 颜色名称选择
const colorName = ref("");
// 颜色名称选项
const colorOptions: { label: string; value: string; disable: boolean }[] = [
  {
    label: "aliceblue",
    value: "f0f8ff",
    disable: false,
  },
  {
    label: "antiquewhite",
    value: "faebd7",
    disable: false,
  },
  {
    label: "aqua",
    value: "0ff",
    disable: false,
  },
  {
    label: "aquamarine",
    value: "7fffd4",
    disable: false,
  },
  {
    label: "azure",
    value: "f0ffff",
    disable: false,
  },

  {
    label: "beige",
    value: "f5f5dc",
    disable: false,
  },
  {
    label: "bisque",
    value: "ffe4c4",
    disable: false,
  },
  {
    label: "black",
    value: "000",
    disable: false,
  },
  {
    label: "blanchedalmond",
    value: "ffebcd",
    disable: false,
  },
  {
    label: "blue",
    value: "00f",
    disable: false,
  },
  {
    label: "blueviolet",
    value: "8a2be2",
    disable: false,
  },
  {
    label: "brown",
    value: "a52a2a",
    disable: false,
  },
  {
    label: "burlywood",
    value: "deb887",
    disable: false,
  },
  {
    label: "burntsienna",
    value: "ea7e5d",
    disable: false,
  },
  {
    label: "cadetblue",
    value: "5f9ea0",
    disable: false,
  },
  {
    label: "chartreuse",
    value: "7fff00",
    disable: false,
  },
  {
    label: "chocolate",
    value: "d2691e",
    disable: false,
  },
  {
    label: "coral",
    value: "ff7f50",
    disable: false,
  },
  {
    label: "cornflowerblue",
    value: "6495ed",
    disable: false,
  },
  {
    label: "cornsilk",
    value: "fff8dc",
    disable: false,
  },
  {
    label: "crimson",
    value: "dc143c",
    disable: false,
  },
  {
    label: "cyan",
    value: "0ff",
    disable: false,
  },
  {
    label: "darkblue",
    value: "00008b",
    disable: false,
  },
  {
    label: "darkcyan",
    value: "008b8b",
    disable: false,
  },
  {
    label: "darkgoldenrod",
    value: "b8860b",
    disable: false,
  },
  {
    label: "darkgray(darkgrey)",
    value: "a9a9a9",
    disable: false,
  },
  {
    label: "darkgreen",
    value: "006400",
    disable: false,
  },
  {
    label: "darkkhaki",
    value: "bdb76b",
    disable: false,
  },
  {
    label: "darkmagenta",
    value: "8b008b",
    disable: false,
  },
  {
    label: "darkolivegreen",
    value: "556b2f",
    disable: false,
  },
  {
    label: "darkorange",
    value: "ff8c00",
    disable: false,
  },
  {
    label: "darkorchid",
    value: "9932cc",
    disable: false,
  },
  {
    label: "darkred",
    value: "8b0000",
    disable: false,
  },
  {
    label: "darksalmon",
    value: "e9967a",
    disable: false,
  },
  {
    label: "darkseagreen",
    value: "8fbc8f",
    disable: false,
  },
  {
    label: "darkslateblue",
    value: "483d8b",
    disable: false,
  },
  {
    label: "darkslategray(darkslategrey)",
    value: "2f4f4f",
    disable: false,
  },
  {
    label: "darkturquoise",
    value: "00ced1",
    disable: false,
  },
  {
    label: "darkviolet",
    value: "9400d3",
    disable: false,
  },
  {
    label: "deeppink",
    value: "ff1493",
    disable: false,
  },
  {
    label: "deepskyblue",
    value: "00bfff",
    disable: false,
  },
  {
    label: "dimgray(dimgrey)",
    value: "696969",
    disable: false,
  },
  {
    label: "dodgerblue",
    value: "1e90ff",
    disable: false,
  },
  {
    label: "firebrick",
    value: "b22222",
    disable: false,
  },
  {
    label: "floralwhite",
    value: "fffaf0",
    disable: false,
  },
  {
    label: "forestgreen",
    value: "228b22",
    disable: false,
  },
  {
    label: "fuchsia",
    value: "ff00ff",
    disable: false,
  },
  {
    label: "gainboro",
    value: "dcdcdc",
    disable: false,
  },
  {
    label: "ghostwhite",
    value: "f8f8ff",
    disable: false,
  },
  {
    label: "gold",
    value: "ffd700",
    disable: false,
  },
  {
    label: "goldenrod",
    value: "daa520",
    disable: false,
  },
  {
    label: "gray(grey)",
    value: "808080",
    disable: false,
  },
  {
    label: "green",
    value: "008000",
    disable: false,
  },
  {
    label: "greenyellow",
    value: "adff2f",
    disable: false,
  },
  {
    label: "honeydew",
    value: "f0fff0",
    disable: false,
  },
  {
    label: "hotpink",
    value: "ff69b4",
    disable: false,
  },
  {
    label: "indianred",
    value: "cd5c5c",
    disable: false,
  },
  {
    label: "indigo",
    value: "4b0082",
    disable: false,
  },
  {
    label: "ivory",
    value: "fff0f0",
    disable: false,
  },
  {
    label: "khaki",
    value: "f0e68c",
    disable: false,
  },
  {
    label: "lavender",
    value: "e6e6fa",
    disable: false,
  },
  {
    label: "lavenderblush",
    value: "fff0f5",
    disable: false,
  },
  {
    label: "lawngreen",
    value: "7cfc00",
    disable: false,
  },
  {
    label: "lemonchiffon",
    value: "fffacd",
    disable: false,
  },
  {
    label: "lightblue",
    value: "add8e6",
    disable: false,
  },
  {
    label: "lightcoral",
    value: "f08080",
    disable: false,
  },
  {
    label: "lightcyan",
    value: "e0ffff",
    disable: false,
  },
  {
    label: "lightgoldenrodyellow",
    value: "fafad2",
    disable: false,
  },
  {
    label: "lightgray(lightgrey)",
    value: "d3d3d3",
    disable: false,
  },
  {
    label: "lightgreen",
    value: "90ee90",
    disable: false,
  },
  {
    label: "lightpink",
    value: "ffb6c1",
    disable: false,
  },
  {
    label: "lightsalmon",
    value: "ffa07a",
    disable: false,
  },
  {
    label: "lightseagreen",
    value: "20b2aa",
    disable: false,
  },
  {
    label: "lightskyblue",
    value: "87cefa",
    disable: false,
  },
  {
    label: "lightslategray",
    value: "778899",
    disable: false,
  },
  {
    label: "lightsteelblue",
    value: "b0c4de",
    disable: false,
  },
  {
    label: "lightyellow",
    value: "ffffe0",
    disable: false,
  },
  {
    label: "lime",
    value: "00ff00",
    disable: false,
  },
  {
    label: "limegreen",
    value: "32cd32",
    disable: false,
  },
  {
    label: "linen",
    value: "faf0e6",
    disable: false,
  },
  {
    label: "magenta",
    value: "ff00ff",
    disable: false,
  },
  {
    label: "maroon",
    value: "800000",
    disable: false,
  },
  {
    label: "mediumaquamarine",
    value: "66cdaa",
    disable: false,
  },
  {
    label: "mediumblue",
    value: "0000cd",
    disable: false,
  },
  {
    label: "mediumorchid",
    value: "9932cc",
    disable: false,
  },
  {
    label: "mediumpurple",
    value: "9370db",
    disable: false,
  },
  {
    label: "mediumseagreen",
    value: "3cb371",
    disable: false,
  },
  {
    label: "mediumslateblue",
    value: "7b68ee",
    disable: false,
  },
  {
    label: "mediumspringgreen",
    value: "00fa9a",
    disable: false,
  },
  {
    label: "mediumturquoise",
    value: "48d1cc",
    disable: false,
  },
  {
    label: "mediumvioletred",
    value: "c71585",
    disable: false,
  },
  {
    label: "midnightblue",
    value: "191970",
    disable: false,
  },
  {
    label: "mintcream",
    value: "f5fffa",
    disable: false,
  },
  {
    label: "mistyrose",
    value: "ffe4e1",
    disable: false,
  },
  {
    label: "moccasin",
    value: "ffe4b5",
    disable: false,
  },
  {
    label: "navajowhite",
    value: "ffdead",
    disable: false,
  },
  {
    label: "navy",
    value: "000080",
    disable: false,
  },
  {
    label: "oldlace",
    value: "fdf5e6",
    disable: false,
  },
  {
    label: "olive",
    value: "808000",
    disable: false,
  },
  {
    label: "olivedrab",
    value: "6b8e23",
    disable: false,
  },
  {
    label: "orange",
    value: "ffa500",
    disable: false,
  },
  {
    label: "orangered",
    value: "ff4500",
    disable: false,
  },
  {
    label: "orchid",
    value: "da70d6",
    disable: false,
  },
  {
    label: "palegoldenrod",
    value: "eee8aa",
    disable: false,
  },
  {
    label: "palegreen",
    value: "98fb98",
    disable: false,
  },
  {
    label: "paleturquoise",
    value: "afeeee",
    disable: false,
  },
  {
    label: "palevioletred",
    value: "db7093",
    disable: false,
  },
  {
    label: "papayawhip",
    value: "ffefd5",
    disable: false,
  },
  {
    label: "peachpuff",
    value: "ffdab9",
    disable: false,
  },
  {
    label: "pearl",
    value: "fff5e6",
    disable: false,
  },
  {
    label: "peru",
    value: "cd853f",
    disable: false,
  },
  {
    label: "pink",
    value: "ffc0cb",
    disable: false,
  },
  {
    label: "plum",
    value: "dda0dd",
    disable: false,
  },
  {
    label: "powderblue",
    value: "b0e0e6",
    disable: false,
  },
  {
    label: "purple",
    value: "800080",
    disable: false,
  },
  {
    label: "rebeccapurple",
    value: "663399",
    disable: false,
  },
  {
    label: "red",
    value: "ff0000",
    disable: false,
  },
  {
    label: "rosybrown",
    value: "bc8f8f",
    disable: false,
  },
  {
    label: "royalblue",
    value: "4169e1",
    disable: false,
  },
  {
    label: "saddlebrown",
    value: "8b4513",
    disable: false,
  },
  {
    label: "salmon",
    value: "fa8072",
    disable: false,
  },
  {
    label: "sandybrown",
    value: "f4a460",
    disable: false,
  },
  {
    label: "seagreen",
    value: "2e8b57",
    disable: false,
  },
  {
    label: "seashell",
    value: "fff5ee",
    disable: false,
  },
  {
    label: "sienna",
    value: "a0522d",
    disable: false,
  },
  {
    label: "silver",
    value: "c0c0c0",
    disable: false,
  },
  {
    label: "skyblue",
    value: "87cefa",
    disable: false,
  },
  {
    label: "slateblue",
    value: "6a5acd",
    disable: false,
  },
  {
    label: "slategray",
    value: "708090",
    disable: false,
  },
  {
    label: "snow",
    value: "fffafa",
    disable: false,
  },
  {
    label: "springgreen",
    value: "00ff7f",
    disable: false,
  },
  {
    label: "steelblue",
    value: "4682b4",
    disable: false,
  },
  {
    label: "tan",
    value: "d2b48c",
    disable: false,
  },
  {
    label: "teal",
    value: "008080",
    disable: false,
  },
  {
    label: "thistle",
    value: "d8bfd8",
    disable: false,
  },
  {
    label: "tomato",
    value: "ff6347",
    disable: false,
  },
  {
    label: "turquoise",
    value: "40e0d0",
    disable: false,
  },
  {
    label: "violet",
    value: "ee82ee",
    disable: false,
  },
  {
    label: "wheat",
    value: "f5deb3",
    disable: false,
  },
  {
    label: "white",
    value: "ffffff",
    disable: false,
  },
  {
    label: "whitesmoke",
    value: "f5f5f5",
    disable: false,
  },
  {
    label: "yellow",
    value: "ffff00",
    disable: false,
  },
  {
    label: "yellowgreen",
    value: "9acd32",
    disable: false,
  },
];
// 颜色名称选择器
const handleColorNameUpdate = (value: string) => {
  color.value = "#" + value;
  colorName.value = value;
};

// 转换颜色
const RGB = ref([0, 0, 0]);
const HSL = ref([0, 0, 0]);
const HSV = ref([0, 0, 0]);
const HWB = ref([0, 0, 0]);
const XYZ = ref([0, 0, 0]);
const LAB = ref([0, 0, 0]);
const LCH = ref([0, 0, 0]);
const CMYK = ref([0, 0, 0, 0]);
const APPLE = ref([0, 0, 0]);
const GRAY = ref([0]);
const KEYWORD = ref("");

// 复制颜色
const copyColor = (type: "HEX" | "RGB" | "HSL" | "HSV" | "HWB" | "XYZ" | "LAB" | "LCH" | "CMYK" | "APPLE" | "GRAY" | "KEYWORD") => {
  const textarea = document.createElement("textarea");
  switch (type) {
    case "HEX":
      textarea.value = color.value;
      break;
    case "RGB":
      textarea.value = `rgb(${RGB.value[0]}, ${RGB.value[1]}, ${RGB.value[2]})`;
      break;
    case "HSL":
      textarea.value = `hsl(${HSL.value[0]}, ${HSL.value[1]}%, ${HSL.value[2]}%)`;
      break;
    case "HSV":
      textarea.value = `hsv(${HSV.value[0]}, ${HSV.value[1]}%, ${HSV.value[2]}%)`;
      break;
    case "HWB":
      textarea.value = `hwb(${HWB.value[0]}, ${HWB.value[1]}%, ${HWB.value[2]}%)`;
      break;
    case "XYZ":
      textarea.value = `xyz(${XYZ.value[0]}, ${XYZ.value[1]}, ${XYZ.value[2]})`;
      break;
    case "LAB":
      textarea.value = `lab(${LAB.value[0]}, ${LAB.value[1]}, ${LAB.value[2]})`;
      break;
    case "LCH":
      textarea.value = `lch(${LCH.value[0]}, ${LCH.value[1]}, ${LCH.value[2]})`;
      break;
    case "CMYK":
      textarea.value = `cmyk(${CMYK.value[0]}, ${CMYK.value[1]}, ${CMYK.value[2]}, ${CMYK.value[3]})`;
      break;
    case "APPLE":
      textarea.value = `apple(${APPLE.value[0]}, ${APPLE.value[1]}, ${APPLE.value[2]})`;
      break;
    case "GRAY":
      textarea.value = `gray(${GRAY.value[0]})`;
      break;
    case "KEYWORD":
      textarea.value = KEYWORD.value;
      break;
    default:
      break;
  }
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
  // 通知
  message.info("颜色已复制");
};

// 主题
const colorConvertThemeName = computed(() => {
  return useConfig.theme == "light" ? "color-convert-light" : "color-convert-dark";
});

const colorConvertTextThemeName = computed(() => {
  return useConfig.theme == "light" ? "color-convert-text-light" : "color-convert-text-dark";
});
</script>

<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 40px;
  column-gap: 20px;
  margin-top: 40px;

  // 颜色选择器容器
  .color-picker {
    display: flex;
    align-items: center;
    gap: 10px; // 添加间距

    // 颜色选择器组件
    .n-color-picker {
      flex: 1; // 自适应宽度
      border-radius: 8px; // 添加圆角
      transition: all 0.3s ease; // 添加过渡效果
    }
  }

  // 颜色名称容器
  .color-name {
    display: flex;
    align-items: center;
    gap: 10px; // 添加间距

    .n-select {
      flex: 1; // 自适应宽度
      border-radius: 8px; // 添加圆角
      transition: all 0.3s ease; // 添加过渡效果
    }
  }

  // 颜色转换容器
  .color-convert {
    display: flex;
    flex-direction: column;
    align-items: flex-start; // 左对齐
    grid-column: 1 / -1; // 跨满两列
    gap: 12px; // 添加间距
    padding: 16px; // 添加内边距
    border-radius: 8px; // 添加圆角

    .color-convert-text-light {
      color: #333; // 调整文字颜色
    }

    .color-convert-text-dark {
      color: #fff; // 调整文字颜色
    }
  }

  .color-convert-light {
    background-color: #ececec;
    .n-button {
      margin-left: 10px;
    }
  }

  .color-convert-dark {
    background-color: #333;
    .n-button {
      margin-left: 10px;
    }
  }
}
</style>
